

<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
<body>
		<canvas id="Mycanvas" width="1000" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			ctx.fillStyle = "chocolate";
			ctx.fillRect(0, 0, 1000, 500);
			var arcArr = [
				[1000, 500, 3, 5, 0, "red"], //x,y,R,vx,vy,color
				[1000, 500, 3, 10, 1, "green"],
				[1000, 500, 3, 8, 2, "yellow"]
			];
			var min1 = 0;
			var max1 = 50;
			setInterval(function() {
					for(var i = 0; i < 100; i++) {
						var vx = Math.floor(Math.random() * 15) +1;
						if(Math.random() > 0.5) {
							vx = -vx;
						}
						var r = Math.floor(Math.random() * 256);
						var g = Math.floor(Math.random() * 256);
						var b = Math.floor(Math.random() * 256);
						var vy = Math.floor(Math.random() * 10) + 30;
						arcArr.push([500, 500,3, vx, -vy, "rgb(" + r + "," + g + "," + b + ")"]);
					}
					}, 1000);
			


			setInterval(function() {
				ctx.fillStyle = "rgba(0,0,0,0.3)";
				ctx.fillRect(0, 0, 1000, 500);
				for(var i = 0; i < arcArr.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];
					ctx.arc(arcArr[i][0], arcArr[i][1], arcArr[i][2], 0, 2 * Math.PI);
					ctx.fill();
					arcArr[i][1] = arcArr[i][1] + arcArr[i][4]; //y
					arcArr[i][4] = arcArr[i][4] + 0.8;
					arcArr[i][0] = arcArr[i][0] + arcArr[i][3]; //x


				}


			}, 20);
		</script>
	</body>


</html>